<template>
  <el-dialog
    title="选择需要移动到的分组"
    :visible.sync="$attrs.visable"
    width="520px"
    :before-close="handleClose"
  >
    <el-form :model="form" :rules="rules" ref="form" label-width="0">
      <el-form-item label="" prop="name">
        <el-tree
          :data="groupList"
          :props="defaultProps"
          @node-click="handleNodeClick"
          class="grouptree"
        >
          <div class="custom-node w_full pl-5" slot-scope="{ node, data }" :class="{active:data.checked}">
            <span class="c_text2">{{ node.label }}</span>
            <span class="c_888999">（{{ data.num }}）</span>
          </div>
        </el-tree>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      groupList: [
        {label:'分组一',id:1,num:1, checked:true, children:[{ label:'分组1-1', id:2, num:0, checked:false}]},
        {label:'分组二',id:3,num:0, checked:false }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {},
      rules: {},
    };
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleNodeClick(data){
    //   console.log('data:',data)
      this.changeData(this.groupList)
      data.checked = true
    },

    changeData(data){
       data.forEach(item => {
        item.checked = false
        if(item.children && item.children.length)
        this.changeData(item.children)
       });
    },

    handleSubmit(){

    },
  },
};
</script>
<style lang="scss" scoped>
.custom-node{
  border-radius: 4px;
  &.active{
    background-color: #ebf2ff;
  }
}
</style>